
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="../js/jquery1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.mobile-1.3.2.min.js"></script>
		<link rel="stylesheet" href="../css/jquery.mobile-1.3.2.min.css"/> 
<script type="text/javascript">
$(function () {
        $('#container1').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Historic World Population by Region'
            },
            subtitle: {
                text: 'Source: Wikipedia.org'
            },
            xAxis: {
                categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' millions'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 1800',
                data: [107, 31, 635, 203, 2]
            }, {
                name: 'Year 1900',
                data: [133, 156, 947, 408, 6]
            }, {
                name: 'Year 2008',
                data: [973, 914, 4054, 732, 34]
            }]
        });
    });
</script>

<script type="text/javascript">
$(function () {
        $('#container2').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: 'US and USSR nuclear stockpiles'
            },
            subtitle: {
                text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
                    'thebulletin.metapress.com</a>'
            },
            xAxis: {
                labels: {
                    formatter: function() {
                        return this.value; // clean, unformatted number for year
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Nuclear weapon states'
                },
                labels: {
                    formatter: function() {
                        return this.value / 1000 +'k';
                    }
                }
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },
            plotOptions: {
                area: {
                    pointStart: 1940,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'USA',
                data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
                    1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                    27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                    26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                    24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                    22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                    10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
            }, {
                name: 'USSR/Russia',
                data: [null, null, null, null, null, null, null , null , null ,null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000]
            }]
        });
    });
</script>

<script type="text/javascript">
$(function () {
        $('#container3').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            tooltip: {
                enabled: false,
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });
</script>
	</head>
	<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<!--***********************************-->
<div data-role="page" id="section1page1" data-title="section1page1">
	<div data-role="header" data-position="fixed"><h1>1Page1</h1>
	<a href="../../shelf/AllSection.html" rel="external" data-icon="back" data-iconpos="left" data-transition="slidefade" data-direction="reverse" class="ui-btn-left">返回</a>
	</div>
	<div data-role="footer" data-position="fixed"><h1>End</h1></div><!--footer-->

<article>
			<h3>6 Chart types</h3>
			<p>Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.</p>
		
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</article>
<article>
			<h3>HTML5 Based</h3>
			<p>Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE.</p>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</article>
<article>
			<h3>Simple and flexible</h3>
			<p>Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.</p>
<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</article>

</div><!--end page1-->
<!--section1page2***************************-->
<link href='css/Signika.css' rel='stylesheet' type='text/css'>
<style type="text/css">

/* general styles for demo ******************/

body {
    background: #eee;
	font-family: signika, sans-serif;
	padding: 20px 50px; }
	
h1 {
    margin-bottom:0;
	padding-left:30px; }
	
h4 {
    color:#666;
	margin-top:0;
    padding-left: 30px;	}
	
.red_info {
    color:#c66; }
	
.blue_info {
    color:#88c;
	font-size:13px; }

/* general styles for bar chart ******************/

.user_outer {
    width: 750px;
	height: 300px; 
	position: relative; }
	
.bar_chart {
    position: relative;
	width: 100%;
	height: 100%;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    vertical-align: bottom;
	margin-left: 50px;
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient(#f8f8f8 2px, transparent 2px),
        -moz-linear-gradient(0, #f8f8f8 2px, transparent 2px),
        -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
        -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; }

.bar_chart dd:after {
    content: "";
	width: 100%;
	position: absolute;
	top: -10px;
	left: 0;
	border-radius: 150px;
	width: 30px;
	height: 15px;
	box-shadow: inset 2px 2px 7px rgba(255,255,255,0.3), 
	    inset -2px -2px 7px rgba(0,0,0,0.1);
	-moz-transition: all 0.2s linear; }

.bar_chart dd:hover:after {
    width: 34px; }
 
.w30 dl {
    width: 30px; }
	
.square {
    width:10px;
	height:10px;
	display:inline-block;
	margin:0 3px -1px 0; }
	
.group {
    padding:0 15px;
	display:inline-block;
	float:left;
	overflow:hidden;
	width:auto;
	height:100%;
	position:relative; }
	
.bar_chart .legend {
    font:10px signika,sans-serif;
	position:absolute;
	right:-15px;
	top:-15px;
	opacity:0.8;
	background:#f5f5ff;
    box-shadow:0 0 3px rgba(0,0,0,0.4); 
	line-height:19px;
    border:1px solid #fff;
	padding:5px 10px; 
	font-size:12px; }

.group .description {
    position:absolute;
	bottom:-5px;
	left:0;
	font:10px signika,sans-serif;
	text-align:center;
	width:100%;
	z-index:99; }

.bar_chart dl, .bar_chart dd, .bar_chart dt {
    margin:0;
    padding:0; }

.bar_chart dl {
    height:100%;
    position:relative;
    display:block;
	float:left; }

.bar_chart dt {
    position:absolute;
    font:10px signika,sans-serif;
	color:#444;
    -moz-transform:rotate(35deg);
    width:100px;
	bottom:-50px;
	left:5px;
	letter-spacing: 1px; }

.bar_chart dd {
    display:block;
    position:absolute;
	bottom:0;
	left:0;
    width:100%;
    font:12px signika,sans-serif;
    -moz-transition:all 0.3s linear;
    box-shadow:inset -15px 0 10px rgba(255,255,255,0.2); }

.bar_chart dd:hover { 
    box-shadow:inset -15px 0 10px rgba(255,255,255,0.2),
        0 0 4px rgba(0,0,0,0.7);
	font-size:12px;
	font-family: arial, sans-serif;
	font-weight:bold;
	z-index:999999;  
	padding-bottom:10px;
	padding-left:2px;
	padding-right:2px;
	margin-left:-2px; }

.bar_chart dl span {
    position:absolute;
	top:-30px;
	left:0;
	width:100%;
	text-align:center; }

.bar_chart dl:hover span {
    margin:-12px 0 0 -10px;
	background:#000;
	color:#eee;
	padding:5px 0; 
	border-radius:10px;
	border-bottom-right-radius:0;
	-moz-transition:all 0.2s linear; 
	-moz-transform:rotate(20deg); }
	
.space {
    width:30px;
	float:left;
	height:1px; }	

 /* charts colors ******************/
 
.blue_light, .blue_light:after {
    background:#4499d5; 
	color:#4499d5; }
.pink, .pink:after {
    background:#D6689D; 
	color:#D6689D; }
.purple, .purple:after {
    background:#8B68BA; 
	color:#8B68BA; }
.turquoise, .turquoise:after {
    background:#0DC19A; 
	color:#0DC19A; }
.nobg {
    background: none !important; }

/* bar heights ******************/

.v1 {height:1%;}
.v2 {height:2%;}
.v3 {height:3%;}
.v4 {height:4%;}
.v5 {height:5%;}
.v6 {height:6%;}
.v7 {height:7%;}
.v8 {height:8%;}
.v9 {height:9%;}
.v10 {height:10%;}
.v11 {height:11%;}
.v12 {height:12%;}
.v13 {height:13%;}
.v14 {height:14%;}
.v15 {height:15%;}
.v16 {height:16%;}
.v17 {height:17%;}
.v18 {height:18%;}
.v19 {height:19%;}
.v20 {height:20%;}
.v21 {height:21%;}
.v22 {height:22%;}
.v23 {height:23%;}
.v24 {height:24%;}
.v25 {height:25%;}
.v26 {height:26%;}
.v27 {height:27%;}
.v28 {height:28%;}
.v29 {height:29%;}
.v30 {height:30%;}
.v31 {height:31%;}
.v32 {height:32%;}
.v33 {height:33%;}
.v34 {height:34%;}
.v35 {height:35%;}
.v36 {height:36%;}
.v37 {height:37%;}
.v38 {height:38%;}
.v39 {height:39%;}
.v40 {height:40%;}
.v41 {height:41%;}
.v42 {height:42%;}
.v43 {height:43%;}
.v44 {height:44%;}
.v45 {height:45%;}
.v46 {height:46%;}
.v47 {height:47%;}
.v48 {height:48%;}
.v49 {height:49%;}
.v50 {height:50%;}
.v51 {height:51%;}
.v52 {height:52%;}
.v53 {height:53%;}
.v54 {height:54%;}
.v55 {height:55%;}
.v56 {height:56%;}
.v57 {height:57%;}
.v58 {height:58%;}
.v59 {height:59%;}
.v60 {height:60%;}
.v61 {height:61%;}
.v62 {height:62%;}
.v63 {height:63%;}
.v64 {height:64%;}
.v65 {height:65%;}
.v66 {height:66%;}
.v67 {height:67%;}
.v68 {height:68%;}
.v69 {height:69%;}
.v70 {height:70%;}
.v71 {height:71%;}
.v72 {height:72%;}
.v73 {height:73%;}
.v74 {height:74%;}
.v75 {height:75%;}
.v76 {height:76%;}
.v77 {height:77%;}
.v78 {height:78%;}
.v79 {height:79%;}
.v80 {height:80%;}
.v81 {height:81%;}
.v82 {height:82%;}
.v83 {height:83%;}
.v84 {height:84%;}
.v85 {height:85%;}
.v86 {height:86%;}
.v87 {height:87%;}
.v88 {height:88%;}
.v89 {height:89%;}
.v90 {height:80%;}
.v91 {height:91%;}
.v92 {height:92%;}
.v93 {height:93%;}
.v94 {height:94%;}
.v95 {height:95%;}
.v96 {height:96%;}
.v97 {height:97%;}
.v98 {height:98%;}
.v99 {height:99%;}
.v100 {height:100%;}

/* bar animations ******************/

@-moz-keyframes grow10 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 10%;opacity:1;}
}

@-moz-keyframes grow20 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 20%;opacity:1;}
}

@-moz-keyframes grow30 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 30%;opacity:1;}
}

@-moz-keyframes grow40 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 40%;opacity:1;}
}

@-moz-keyframes grow50 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 50%;opacity:1;}
}

@-moz-keyframes grow60 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 60%;opacity:1;}
}
@-moz-keyframes grow70 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 70%;opacity:1;}
}

@-moz-keyframes grow80 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 80%;opacity:1;}
}

@-moz-keyframes grow90 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 90%;opacity:1;}
}

@-moz-keyframes grow100 {
 0% {max-height: 0;opacity:0;}
 100% {max-height: 100%;opacity:1;}
}

.v1,.v2,.v3,.v4,.v5,.v6,.v7,.v8,.v9,.v10 { -moz-animation-name: grow10;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }
 
 .v11,.v12,.v13,.v14,.v15,.v16,.v17,.v18,.v19,.v20 { -moz-animation-name: grow20;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }
 
.v21,.v22,.v23,.v24,.v25,.v26,.v27,.v28,.v29,.v30 { -moz-animation-name: grow30;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }
 
.v31,.v32,.v33,.v34,.v35,.v36,.v37,.v38,.v39,.v40 { -moz-animation-name: grow40;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }
 
.v41,.v42,.v43,.v44,.v45,.v46,.v47,.v48,.v49,.v50 { -moz-animation-name: grow50;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }
 
.v51,.v52,.v53,.v54,.v55,.v56,.v57,.v58,.v59,.v60 { -moz-animation-name: grow60;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }

.v61,.v62,.v63,.v64,.v65,.v66,.v67,.v68,.v69,.v70 { -moz-animation-name: grow70;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }

.v71,.v72,.v73,.v74,.v75,.v76,.v77,.v78,.v79,.v80 { -moz-animation-name: grow80;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }

.v81,.v82,.v83,.v84,.v85,.v86,.v87,.v88,.v89,.v90 { -moz-animation-name: grow90;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }

.v91,.v92,.v93,.v94,.v95,.v96,.v97,.v98,.v99,.v100 { -moz-animation-name: grow100;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
 }
 
/* chart scale ******************/

.scale {font:10px signika,sans-serif;position:absolute;right:100%;width:40px;text-align:right;line-height:0;color:#666;}
.h100 {top:0;}
.h90 {top:10%;}
.h80 {top:20%;}
.h70 {top:30%;}
.h60 {top:40%;}
.h50 {top:50%;}
.h40 {top:60%;}
.h30 {top:70%;}
.h20 {top:80%;}
.h10 {top:90%;}

/* general styles for pie chart ********************/

.triangle { 
    width: 0px; height: 0px;
    border: 100px solid transparent;
    border-top-color: blue;
    position: absolute;
    -moz-transition: all 0.5s ease-in-out;
    overflow: hidden;
}

@-moz-keyframes rotate-summer {
 0% {-moz-transform:rotate(-90deg);opacity:0;}
 100% {-moz-transform:rotate(0deg);opacity:1;}
}


@-moz-keyframes rotate-autumn {
 0% {-moz-transform:rotate(0deg);opacity:0;}
 100% {-moz-transform:rotate(84deg);opacity:1;}
}

@-moz-keyframes rotate-autumn2 {
 0% {-moz-transform:rotate(0deg);opacity:0;}
 100% {-moz-transform:rotate(64deg);opacity:1;}
}

@-moz-keyframes rotate-winter {
 0% {-moz-transform:rotate(0deg);opacity:0;}
 100% {-moz-transform:rotate(220deg);opacity:1;}
}

@-moz-keyframes rotate-winter2 {
 0% {-moz-transform:rotate(0deg);opacity:0;}
 100% {-moz-transform:rotate(173deg);opacity:1;}
}

@-moz-keyframes rotate-spring {
 0% {-moz-transform:rotate(0deg);opacity:0;}
 100% {-moz-transform:rotate(284deg);opacity:1;}
}

@-moz-keyframes percent {
 0% {opacity:0;}
 100% {opacity:0.7;}
}

.percent {-moz-animation-name: percent;
		-moz-animation-duration: 4s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;}

.triangle.summer {-moz-transform:rotate(0deg);-moz-animation-name: rotate-summer;
		-moz-animation-duration: 2s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;border-top-color:#8B68BA;z-index:98;}
.triangle.autumn {-moz-transform:rotate(84deg);-moz-animation-name: rotate-autumn;
		-moz-animation-duration: 2s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;	border-top-color:#D6689D;z-index:99;}
.triangle.autumn2 {-moz-transform:rotate(64deg);;-moz-animation-name: rotate-autumn2;
		-moz-animation-duration: 2s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;border-top-color:#D6689D;z-index:99;}
.triangle.winter {-moz-transform:rotate(220deg);;-moz-animation-name: rotate-winter;
		-moz-animation-duration: 2.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;border-top-color:#0DC19A;}
.triangle.winter2 {-moz-transform:rotate(173deg);;-moz-animation-name: rotate-winter2;
		-moz-animation-duration: 2.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;border-top-color:#0DC19A;}
.triangle.spring {-moz-transform:rotate(284deg);-moz-animation-name: rotate-spring;
		-moz-animation-duration: 2s;
		-moz-animation-iteration-count: 1;
		-moz-animation-direction: alternate;border-top-color:#47afFA;}		
		
.circle {
    width: 200px; height: 200px; -moz-transform: rotate(-20deg);
    border-radius: 50%;
    background: #286CA8;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 0 #286CA8, 0 3px 12px #999; }
 
.triangle {
    -moz-background-origin: border;
    background-origin: border-box; }

.center_cicle {
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient(#f8f8f8 2px, transparent 2px),
        -moz-linear-gradient(0, #f8f8f8 2px, transparent 2px),
        -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
        -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; }	
	
.pie_outer {
    width: 200px; 
	height: 200px; 
	border-radius: 50%;
	padding:10px;
    position:absolute; 
	right:30px; 
	bottom: 20px;
	font-size:12px;
	color:#777; }

.percent {
    -moz-transition:all 0.3s linear;
	padding:5px;
	border-radius:10px; }
	
.pie_outer .circle {
    -moz-transition: all 0.2s linear; }
	
.pie_outer:hover .circle {
    box-shadow: 0px 4px 0 #286CA8, 0 3px 16px #777; }
	
.center_circle  {
    -moz-transition:all 0.2s linear; 
	background-color: #f3f3f3;
    background-image: -moz-linear-gradient(#f8f8f8 2px, transparent 2px),
        -moz-linear-gradient(0, #f8f8f8 2px, transparent 2px),
        -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
        -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; 
	width:100px;
	height:100px;
	position:absolute;
	z-index:9999999;
	top:60px;
	left:60px;
	border-radius:50%;
	border-top:4px solid #286CA8; 
	box-shadow:inset 0 0 9px #888; }
	
.percent.purple {
    position:absolute; 
	top:0px;
	left:15px; 
	z-index:9999999999;
	margin:5px 0 0 5px; }	
	
.percent.pink { 
    position:absolute; 
	top:42px;
	left:208px; 
	z-index:9999999999;
	margin:5px 0 0 -5px;}
	
.percent.blue_light {
    position:absolute; 
	top:145px;
	left:-25px; 
	z-index:9999999999;
	margin:-5px 0 0 5px;  }
	
.percent.turquoise {
    position:absolute; 
	top:195px;
	left:180px; 
	z-index:9999999999;
	margin: -5px 0 0 -5px }
	
.pie_outer:hover .center_circle {
    box-shadow:inset 0 0 14px #666 !important;}
	
.pie_outer:hover .percent { 
    color:#eee !important;
    margin: 0 !important;
	-moz-transition:all 0.2s linear; }
	
.pie_outer:hover .percent.pink {	
    border-bottom-left-radius:0;
	background:#D6689D !important; }
	
.pie_outer:hover .percent.blue_light {	
    border-top-right-radius:0;
	background:#47AFFA !important; }
	
.pie_outer:hover .percent.turquoise {
    border-top-left-radius:0;
	background:#0DC19A !important; }
	
.pie_outer:hover .percent.purple {	
    border-bottom-right-radius:0;
	background:#8B68BA !important; }	
</style>
<div data-role="page" id="section1page2" data-title="section1page2">
	<div data-role="header" data-position="fixed"><h1>1Page2</h1>
	<a href="../../shelf/AllSection.html" rel="external" data-icon="back" data-iconpos="left" data-transition="slidefade" data-direction="reverse" class="ui-btn-left">返回</a>
	</div>
	<div data-role="footer" data-position="fixed"><h1>End</h1></div><!--footer-->
<h1>CSS3 Charts</h1>
<h4>No JavaScript, no images, just pure CSS code. <span class="red_info">Optimized for Firefox. </span><br/>
<span class="blue_info">Hint: try to hover over the charts! You may also reload the page to see the enter animation.</span></h4><br/>



<div class="user_outer">
<div class="bar_chart w30">
<span class="scale h10">10 -</span>
<span class="scale h20">20 -</span>
<span class="scale h30">30 -</span>
<span class="scale h40">40 -</span>
<span class="scale h50">50 -</span>
<span class="scale h60">60 -</span>
<span class="scale h70">70 -</span>
<span class="scale h80">80 -</span>
<span class="scale h90">90 - </span>
<span class="scale h100">100 -</span>

<div class="legend">
	<span class="square turquoise"></span> winter <br/>
	<span class="square blue_light"></span> spring<br/>
	<span class="square purple"></span> summer<br/>
	<span class="square pink"></span> autumn<br/>
</div>
    <span class="space"></span>
	
	<dl>
        <dt>January</dt>
        <dd class="turquoise v50"><span>50</span></dd>
    </dl>
    <dl>
        <dt>February</dt>
        <dd class="turquoise v43"><span>43</span></dd>
    </dl>
		    <dl>
        <dt>March</dt>
        <dd class="turquoise v57"><span>57</span></dd>
    </dl>
    <dl>
        <dt>April</dt>
        <dd class="blue_light v45"><span>45</span></dd>
    </dl>
    <dl>
        <dt>May</dt>
        <dd class="blue_light v35"><span>35</span></dd>
    </dl>
	
    <dl>
        <dt>June</dt>
        <dd class="blue_light v30"><span>30</span></dd>
    </dl>
    <dl>
        <dt>July</dt>
        <dd class="purple v30"><span>30</span></dd>
    </dl>
	    <dl>
        <dt>August</dt>
        <dd class="purple v35"><span>35</span></dd>
    </dl>
    <dl>
        <dt>September</dt>
        <dd class="purple v25"><span>25</span></dd>
    </dl>
    <dl>
        <dt>October</dt>
        <dd class="pink v33"><span>33</span></dd>
    </dl>
	<dl>
        <dt>November</dt>
        <dd class="pink v53"><span>53</span></dd>
    </dl>
    <dl>
        <dt>December</dt>
		<dd class="pink v64"><span>64</span></dd>
    </dl>
 	 
     
</div>

<div class="pie_outer">
	
	<div class="circle">
		 <div class="triangle summer"></div>
		 <div class="triangle autumn"></div>
		 <div class="triangle autumn2"></div>
		 <div class="triangle winter"></div>
		 <div class="triangle winter2"></div>
		 <div class="triangle spring"></div>
		 <div class="center"></div>
	</div>

	<span class="percent nobg purple">18%</span>
	<span class="percent nobg pink">30%</span>
	<span class="percent nobg turquoise">30%</span>
	<span class="percent nobg blue_light">22%</span>

	<div class="center_circle"></div>
</div>
</div><!--end page2-->
<!--section1page3-->
<script src="js/clock.js"></script> 
<link rel="stylesheet" href="css/clock.css"> 
<div data-role="page" id="section1page3" data-title="section1page3"><!--page2-->
<div data-role="header" data-position="fixed"><h1>Page2</h1>
<a href="../../shelf/AllSection.html" rel="external" data-icon="back" data-iconpos="left" data-transition="slidefade" data-direction="reverse" class="ui-btn-left">返回</a>
</div><!--header-->
<div data-role="footer" data-position="fixed"><h1>End</h1></div><!--footer-->

  <p>The time is: <output id="clock"></output></p> 
</div><!--end section1page3-->
<!--changepage-->
<script>
		$(function(){
			$("#section1page1").bind("swipeleft",function(){
				
				
				$.mobile.changePage("#section1page2",{transition:"flip",reverse:true},true,true);
				});

			$("#section1page2").bind("swiperight",function(){
				$.mobile.changePage("#section1page1",{transition:"flip",reverse:true},true,true);
				});
		});
	</script>

<script>
		$(function(){
			$("#section1page2").bind("swipeleft",function(){
				
				
				$.mobile.changePage("#section1page3",{transition:"flip",reverse:true},true,true);
				});

			$("#section1page3").bind("swiperight",function(){
				$.mobile.changePage("#section1page2",{transition:"flip",reverse:true},true,true);
				});
		});
	</script>
	</body>
</html>
